<template>
    <div> 
        <a-input-search allow-clear v-model:value="deptName" placeholder="请输入部门关键词" style="width: 200px; margin-bottom: 10px"/>

        <a-tree v-model:selectedKeys="selectedKeys" :tree-data="treeData" show-icon default-expand-all @select="treeConfirm">
            <template #title="{ deptName,children }">
                <view v-if="children != null">
                    <BankOutlined />
            
                </view>
                {{ deptName }}
            </template>
        </a-tree>

        <!-- <el-tree :data="data" :props="{ label: 'fullName', children: 'children' }" :expand-on-click-node="false"
            :filter-node-method="filterNode" ref="companyTreeRef" highlight-current :default-expand-all="false"
            @node-click="handleNodeClick" /> -->
    </div>
</template>
<script setup>
import { BankOutlined } from '@ant-design/icons-vue';
import useDeptStore from '@/module/system/store/dept';
const deptStore = useDeptStore();
import useApp from '@/hooks'
const { $, proxy } = useApp()
const deptName = ref(null)
const treeData = ref([])
const emit = defineEmits(['confirm'])
watch(() => deptName.value, (newVal, oldVal) => {
    const t = $.freeStore(deptStore.deptTree)
    console.log(t)
    if ($.isEmpty(newVal)) {
        treeData.value = t
    }
    else {
        treeData.value = $.treeFilter(t, newVal)
    }

})
// 叶子节点选中
function treeConfirm(keys){
    console.log(keys)
    emit('confirm',keys[0])
}
function buildTree() {
    deptStore.getTree().then(response => {
       
        treeData.value = $.freeStore(deptStore.deptTree)
    })
}
buildTree()
</script>